<template>
  <div class="product-card" @click="toDetails">
    <div class="product-image">
      <el-image :src="product.mainImg" fit="cover" />
      <div class="product-tags" v-if="product.tags">
        <span v-for="tag in product.tags.split(',')" :key="tag" class="tag">
          {{ tag }}
        </span>
      </div>
    </div>
    <div class="product-info">
      <div class="product-name" :title="product.name">{{ product.name }}</div>
      <div class="product-desc" v-if="product.description">{{ product.description }}</div>
      <div class="product-price">
        <span class="price-symbol">¥</span>
        <span class="price-value">{{ product.price }}</span>
        <span class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</span>
      </div>
      <div class="product-footer">
        <span class="sales">已售 {{ product.salesVolume || 0 }}</span>
        <el-rate
          v-model="product.score"
          disabled
          text-color="#ff6700"
          score-template="{value}"
          :show-score="true"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const props = defineProps({
  product: {
    type: Object,
    required: true
  }
})

const router = useRouter()

const toDetails = () => {
  router.push(`/front/productDetails/${props.product.id}`)
}
</script>

<style scoped>
.product-card {
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: #e1251b;
}

.product-image {
  position: relative;
  width: 100%;
  height: 200px;
}

.product-image :deep(.el-image) {
  width: 100%;
  height: 100%;
}

.product-tags {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  padding: 2px 6px;
  background-color: #e1251b;
  color: #fff;
  font-size: 12px;
  border-radius: 2px;
}

.product-info {
  padding: 12px;
}

.product-name {
  font-size: 14px;
  color: #333;
  line-height: 20px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 8px;
}

.product-desc {
  font-size: 12px;
  color: #999;
  line-height: 18px;
  height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 8px;
}

.product-price {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 12px;
  color: #e1251b;
}

.price-value {
  font-size: 20px;
  font-weight: bold;
  color: #e1251b;
  margin-right: 8px;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sales {
  font-size: 12px;
  color: #999;
}

:deep(.el-rate) {
  height: 16px;
  line-height: 16px;
}

:deep(.el-rate__icon) {
  font-size: 12px;
  margin-right: 2px;
}

:deep(.el-rate__text) {
  font-size: 12px;
}
</style>